@use './variables.scss' as *;

// 响应式设计样式

// 容器
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-4;
  
  @include respond-to(sm) {
    padding: 0 $spacing-6;
  }
  
  @include respond-to(lg) {
    padding: 0 $spacing-8;
  }
}

// 栅格系统
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 (-$spacing-2);
  
  @include respond-to(sm) {
    margin: 0 (-$spacing-3);
  }
}

.col {
  flex: 1;
  padding: 0 $spacing-2;
  
  @include respond-to(sm) {
    padding: 0 $spacing-3;
  }
}

// 响应式栅格
@for $i from 1 through 12 {
  .col-#{$i} {
    flex: 0 0 calc($i / 12 * 100%);
    max-width: calc($i / 12 * 100%);
    padding: 0 $spacing-2;
    
    @include respond-to(sm) {
      padding: 0 $spacing-3;
    }
  }
}

// 小屏幕栅格
@include respond-to(sm) {
  @for $i from 1 through 12 {
    .col-sm-#{$i} {
      flex: 0 0 calc($i / 12 * 100%);
      max-width: calc($i / 12 * 100%);
    }
  }
}

// 中屏幕栅格
@include respond-to(md) {
  @for $i from 1 through 12 {
    .col-md-#{$i} {
      flex: 0 0 calc($i / 12 * 100%);
      max-width: calc($i / 12 * 100%);
    }
  }
}

// 大屏幕栅格
@include respond-to(lg) {
  @for $i from 1 through 12 {
    .col-lg-#{$i} {
      flex: 0 0 calc($i / 12 * 100%);
      max-width: calc($i / 12 * 100%);
    }
  }
}

// 超大屏幕栅格
@include respond-to(xl) {
  @for $i from 1 through 12 {
    .col-xl-#{$i} {
      flex: 0 0 calc($i / 12 * 100%);
      max-width: calc($i / 12 * 100%);
    }
  }
}

// 响应式显示/隐藏
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-block {
  display: inline-block !important;
}

// 小屏幕显示/隐藏
@include respond-to(sm) {
  .d-sm-none {
    display: none !important;
  }
  
  .d-sm-block {
    display: block !important;
  }
  
  .d-sm-flex {
    display: flex !important;
  }
  
  .d-sm-inline-block {
    display: inline-block !important;
  }
}

// 中屏幕显示/隐藏
@include respond-to(md) {
  .d-md-none {
    display: none !important;
  }
  
  .d-md-block {
    display: block !important;
  }
  
  .d-md-flex {
    display: flex !important;
  }
  
  .d-md-inline-block {
    display: inline-block !important;
  }
}

// 大屏幕显示/隐藏
@include respond-to(lg) {
  .d-lg-none {
    display: none !important;
  }
  
  .d-lg-block {
    display: block !important;
  }
  
  .d-lg-flex {
    display: flex !important;
  }
  
  .d-lg-inline-block {
    display: inline-block !important;
  }
}

// 超大屏幕显示/隐藏
@include respond-to(xl) {
  .d-xl-none {
    display: none !important;
  }
  
  .d-xl-block {
    display: block !important;
  }
  
  .d-xl-flex {
    display: flex !important;
  }
  
  .d-xl-inline-block {
    display: inline-block !important;
  }
}

// 响应式间距
$spacers: (
  0: 0,
  1: $spacing-1,
  2: $spacing-2,
  3: $spacing-3,
  4: $spacing-4,
  5: $spacing-5,
  6: $spacing-6
);

@each $breakpoint in (xs, sm, md, lg, xl) {
  @include respond-to($breakpoint) {
    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        .#{$abbrev}#{if($breakpoint == xs, '', '-' + $breakpoint)}-#{$size} {
          #{$prop}: $length !important;
        }
        .#{$abbrev}t#{if($breakpoint == xs, '', '-' + $breakpoint)}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{if($breakpoint == xs, '', '-' + $breakpoint)}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{if($breakpoint == xs, '', '-' + $breakpoint)}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{if($breakpoint == xs, '', '-' + $breakpoint)}-#{$size} {
          #{$prop}-left: $length !important;
        }
        .#{$abbrev}x#{if($breakpoint == xs, '', '-' + $breakpoint)}-#{$size} {
          #{$prop}-left: $length !important;
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}y#{if($breakpoint == xs, '', '-' + $breakpoint)}-#{$size} {
          #{$prop}-top: $length !important;
          #{$prop}-bottom: $length !important;
        }
      }
    }
  }
}

// 响应式文本对齐
@each $breakpoint in (xs, sm, md, lg, xl) {
  @include respond-to($breakpoint) {
    .text#{if($breakpoint == xs, '', '-' + $breakpoint)}-left {
      text-align: left !important;
    }
    .text#{if($breakpoint == xs, '', '-' + $breakpoint)}-right {
      text-align: right !important;
    }
    .text#{if($breakpoint == xs, '', '-' + $breakpoint)}-center {
      text-align: center !important;
    }
    .text#{if($breakpoint == xs, '', '-' + $breakpoint)}-justify {
      text-align: justify !important;
    }
  }
}

// 响应式浮动
@each $breakpoint in (xs, sm, md, lg, xl) {
  @include respond-to($breakpoint) {
    .float#{if($breakpoint == xs, '', '-' + $breakpoint)}-left {
      float: left !important;
    }
    .float#{if($breakpoint == xs, '', '-' + $breakpoint)}-right {
      float: right !important;
    }
    .float#{if($breakpoint == xs, '', '-' + $breakpoint)}-none {
      float: none !important;
    }
  }
}

// 移动端特殊样式
@include respond-to(xs) {
  // 移动端导航
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    z-index: $z-index-fixed;
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: $spacing-2 $spacing-1;
      text-decoration: none;
      color: var(--text-color-secondary);
      font-size: $font-size-xs;
      
      &.active {
        color: var(--primary-color);
      }
      
      .icon {
        margin-bottom: $spacing-1;
        font-size: 20px;
      }
    }
  }
  
  // 移动端表格
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    
    table {
      min-width: 600px;
    }
  }
  
  // 移动端卡片
  .card-mobile {
    margin-bottom: $spacing-3;
    border-radius: $border-radius-lg;
    box-shadow: $shadow-sm;
    
    .card-header {
      padding: $spacing-3;
      border-bottom: 1px solid var(--border-color);
      font-weight: $font-weight-semibold;
    }
    
    .card-body {
      padding: $spacing-3;
    }
    
    .card-footer {
      padding: $spacing-3;
      border-top: 1px solid var(--border-color);
      background-color: var(--bg-color-secondary);
    }
  }
  
  // 移动端按钮
  .btn-mobile {
    width: 100%;
    padding: $spacing-3;
    font-size: $font-size-base;
    border-radius: $border-radius-lg;
    touch-action: manipulation;
  }
  
  // 移动端表单
  .form-mobile {
    .form-group {
      margin-bottom: $spacing-4;
    }
    
    .form-control {
      padding: $spacing-3;
      font-size: $font-size-base;
      border-radius: $border-radius-lg;
    }
    
    .form-label {
      font-weight: $font-weight-medium;
      margin-bottom: $spacing-2;
    }
  }
}

// 平板端样式
@include respond-to(md) {
  .tablet-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: $spacing-6;
  }
  
  .sidebar-tablet {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: var(--bg-color);
    box-shadow: $shadow-lg;
    transition: left 0.3s ease;
    z-index: $z-index-modal;
    
    &.open {
      left: 0;
    }
  }
  
  .overlay-tablet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: $z-index-modal-backdrop;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    
    &.show {
      opacity: 1;
      visibility: visible;
    }
  }
}

// 桌面端样式
@include respond-to(lg) {
  .desktop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas: 
      "sidebar header"
      "sidebar main";
    height: 100vh;
  }
  
  .sidebar-desktop {
    grid-area: sidebar;
    background: var(--bg-color);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
  }
  
  .header-desktop {
    grid-area: header;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    @include flex-between;
    padding: 0 $spacing-6;
  }
  
  .main-desktop {
    grid-area: main;
    overflow-y: auto;
    padding: $spacing-6;
  }
}

// 超大屏幕样式
@include respond-to(xl) {
  .desktop-layout {
    grid-template-columns: 280px 1fr;
  }
  
  .container-xl {
    max-width: 1400px;
  }
}

// 触摸设备特殊样式
@media (hover: none) and (pointer: coarse) {
  .hover-effects {
    &:hover {
      background-color: transparent;
      transform: none;
    }
  }
  
  .touch-friendly {
    min-height: 44px;
    min-width: 44px;
    padding: $spacing-3;
  }
}

// 高分辨率屏幕
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .high-dpi {
    .icon {
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
  }
}

// 打印样式
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
  
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr,
  img {
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
  }
  
  @page {
    margin: 0.5cm;
  }
  
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
} 